<template>
  <el-form :model="formInline" ref="formInline" style="text-align:center;font-size:20px;" size="medium"
    label-width="230px">
    <el-steps :active="formInline.active" align-center finish-status="success" style="font-size:18px">
      <el-step title="收件"></el-step>
      <!-- <el-step title="资料审查"></el-step> -->
      <el-step title="规划许可"></el-step>
      <el-step title="施工管理"></el-step>
      <el-step title="竣工验收"></el-step>
      <el-step title="归档"></el-step>
    </el-steps>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="流转信息" name="first" class="cardStyle">
        <el-table v-loading :data="opinionInfo" style="width: 100%;border: 1px solid #EBEEF5;" :row-style="styleRow"
          :header-row-style="headerRow">
          <el-table-column prop="uName" label="操作人" width="100" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="submitTime" label="操作时间" align="center" min-width="12%" sortable></el-table-column>
          <el-table-column prop="uTel" label="操作人电话" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="opinion" label="意见" align="center" min-width="12%"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" min-width="12%" :formatter="opinionStateFormetter">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待办详情" name="second" formatter="processNameFormatter">
        <!-- 申请户主信息 表单里面(已经在表单里面) -->
        <el-card style="font-size:20px">
          户主信息
          <el-row :gutter="10" style="margin-top:1%">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="formInline.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="性别">
                <el-radio-group v-model="formInline.sex">
                  <el-radio-button label="男" value="男"></el-radio-button>
                  <el-radio-button label="女" value="女"></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄（岁）">
                <el-input v-model="formInline.age" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="身份证号">
                <el-input v-model="formInline.idCard" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话">
                <el-input v-model="formInline.tel" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户口所在地">
                <el-input v-model="formInline.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="乡镇街道">
                <el-input v-model="formInline.townName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="村组社区">
                <el-input v-model="formInline.villageName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 家庭成员信息录入以及列表 不用再表单里面 -->
        <el-card style="margin-top:1%; font-size:20px">
          家庭成员信息
          <br />

          <el-table :data="familyMember" v-loading>
            <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="sex" label="年龄" :formatter="sexFormatter" align="center"></el-table-column>
            <el-table-column prop="relation" label="与户主关系" align="center"></el-table-column>
            <el-table-column prop="idCard" label="身份证号" align="center"></el-table-column>
            <el-table-column prop="address" label="户口所在地" align="center"></el-table-column>
          </el-table>
        </el-card>
        <el-card style="margin-top:1%">
          现宅基地及农房情况
          <el-row :gutter="10" style="margin-top:1%">
            <el-col :span="8">
              <el-form-item label="宅基地面积（㎡）">
                <el-input v-model="formInline.nowHomesteadArea" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建筑面积（㎡）">
                <el-input v-model="formInline.nowBuildArea" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权属证书号">
                <el-input v-model="formInline.nowBookId" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="保留原宅基地面积（㎡）">
                <el-input v-model.number="formInline.nowSaveArea" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退给村集体面积（㎡）">
                <el-input v-model.number="formInline.nowReturnArea" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他面积（㎡）">
                <el-input v-model.number="formInline.nowOtherArea" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card style="margin-top:1%">
          <el-tabs tabPosition="top" v-model="viewState">
            <el-tab-pane label=" 拟申请宅基地及建房情况" name="first">
              <el-row :gutter="10" style="margin-top:1%">
                <el-col :span="8">
                  <el-form-item label="宅基地面积（㎡）">
                    <el-input v-model="apply.applyHomesteadArea" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="房基占地面积（㎡）">
                    <el-input v-model="apply.applyFoundationArea" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="拟申请地址">
                    <el-input v-model="formInline.applyAddress" class="input-with-select">
                      <el-select v-model="formInline.villageType" slot="append" placeholder="请选择组或社"
                        style="width: 150px;">
                        <el-option label="组" value="组"></el-option>
                        <el-option label="社" value="社"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="地类">
                    <el-select v-model="apply.landType" style="width:100%" disabled>
                      <el-option label="请选择地类" value></el-option>
                      <el-option label="建设用地" value="1"></el-option>
                      <el-option label="未利用地" value="2"></el-option>
                      <el-option label="农用地" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="住房建筑面积（㎡）">
                    <el-input v-model="apply.applyHousingArea" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="建筑层数（层）">
                    <el-input v-model="apply.applyLayer" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="建筑高度（m）">
                    <el-input v-model="apply.applyHight" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="东至">
                    <el-input v-model="apply.east" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="南至">
                    <el-input v-model="apply.south" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="西至">
                    <el-input v-model="apply.west" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="北至">
                    <el-input v-model="apply.north" autocomplete="off" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否征求相邻权利人意见">
                    <el-radio-group v-model="apply.neighborMind" disabled>
                      <el-radio-button label="是" value="是"></el-radio-button>
                      <el-radio-button label="否" value="否"></el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="拟批准宅基地及建房情况" class="cardStyle" name="second">
              <el-row :gutter="10" style="margin-top:1%">
                <el-col :span="8">
                  <el-form-item label="宅基地面积（㎡）">
                    <el-input v-model="formInline.applyHomesteadArea" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="房基占地面积（㎡）">
                    <el-input v-model="formInline.applyFoundationArea" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="拟申请地址">
                    <el-input v-model="formInline.applyAddress" class="input-with-select">
                      <el-select v-model="formInline.villageType" slot="append" placeholder="请选择组或社"
                        style="width: 150px;">
                        <el-option label="组" value="组"></el-option>
                        <el-option label="社" value="社"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="地类">
                    <el-select v-model="formInline.landType" style="width:100%">
                      <el-option label="请选择地类" value></el-option>
                      <el-option label="建设用地" value="1"></el-option>
                      <el-option label="未利用地" value="2"></el-option>
                      <el-option label="农用地" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="住房建筑面积（㎡）">
                    <el-input v-model="formInline.applyHousingArea" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="建筑层数（层）">
                    <el-input v-model="formInline.applyLayer" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="建筑高度（m）">
                    <el-input v-model="formInline.applyHight" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="东至">
                    <el-input v-model="formInline.east" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="南至">
                    <el-input v-model="formInline.south" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="西至">
                    <el-input v-model="formInline.west" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="北至">
                    <el-input v-model="formInline.north" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card style="margin-top:10px" v-if="formInline.active!==2&&formInline.active!==4&&formInline.taskState!==0">
          要件上传
          <div class="uploadStyle">
            <span style="float:left;width:20%" v-if="formInline.active===1">
              规划许可证书（已盖章）
              <el-upload action style="margin-top:2%" :before-upload="uploadLicence">
                <el-button slot="trigger" type="primary" style="width:80px;font-size:15px">上传</el-button>
              </el-upload>
            </span>
            <span style="float:left;width:20%" v-if="formInline.active===1">
              宅基地批准书（已盖章）
              <el-upload action style="margin-top:2%" :before-upload="uploadApprove">
                <el-button slot="trigger" type="primary" style="width:80px;font-size:15px">上传</el-button>
              </el-upload>
            </span>
            <span style="float:left;width:20%" v-if="formInline.active===3">
              验收意见表（已盖章）
              <el-upload action style="margin-top:2%" :before-upload="uploadCheck">
                <el-button slot="trigger" type="primary" style="width:80px;font-size:15px">上传</el-button>
              </el-upload>
            </span>
          </div>
        </el-card>

        <el-card style="margin-top:10px">
          要件列表
          <el-collapse v-model="activeNames" style="margin-top:1%">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="col-item-titel">
                  <i class="header-icon el-icon-edit"></i>
                  业务接件
                </div>
              </template>
              <el-table :data="fileList1" style="margin-top:1%" v-loading>
                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)" type="primary">预览
                    </el-button>
                    <el-button size="mini" @click="downDocument(scope.$index, scope.row)" type="success">下载</el-button>
                    <el-button size="mini" @click="handleDeleteFile(scope.$index, scope.row)" type="info"
                      v-if="formInline.active+2 == scope.row.type">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <div class="col-item-titel">
                  <i class="header-icon el-icon-tickets"></i>
                  规划许可
                </div>
              </template>
              <el-table :data="fileList2" style="margin-top:1%" v-loading>
                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)" type="primary">预览
                    </el-button>
                    <el-button size="mini" @click="downDocument(scope.$index, scope.row)" type="success">下载</el-button>
                    <!-- <el-button size="mini" @click="showForm = true">修 改</el-button> -->
                    <!-- <el-button size="mini" @click="updatePro(scope.$index, scope.row)">修 改</el-button> -->
                    <el-button size="mini" @click="handleDeleteFile(scope.$index, scope.row)" type="info"
                      v-if="formInline.active+2 == scope.row.type">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                <div class="col-item-titel">
                  <i class="header-icon el-icon-set-up"></i>
                  施工管理
                </div>
              </template>
              <el-table :data="fileList3" style="margin-top:1%" v-loading>
                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)" type="primary">预览
                    </el-button>
                    <!-- <el-button size="mini" @click="printFile(scope.$index, scope.row)" type="primary">打印</el-button> -->
                    <el-button size="mini" @click="downDocument(scope.$index, scope.row)" type="success">下载</el-button>
                    <el-button size="mini" @click="handleDeleteFile(scope.$index, scope.row)" type="info"
                      v-if="formInline.active+2 == scope.row.type">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item name="4">
              <template slot="title">
                <div class="col-item-titel">
                  <i class="header-icon el-icon-folder-add"></i>
                  竣工验收
                </div>
              </template>
              <el-table :data="fileList4" style="margin-top:1%" v-loading>
                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)" type="primary">预览
                    </el-button>
                    <!-- <el-button size="mini" @click="printFile(scope.$index, scope.row)" type="primary">打印</el-button> -->
                    <el-button size="mini" @click="downDocument(scope.$index, scope.row)" type="success">下载</el-button>
                    <el-button size="mini" @click="handleDeleteFile(scope.$index, scope.row)" type="info"
                      v-if="formInline.active+2 == scope.row.type">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
          <el-dialog :visible.sync="centerDialogVisible" center width="36%">
            <div class="block">
              <el-image :src="url" ref="printImg" id="printImg"></el-image>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" v-print="'#printImg'" @click="centerDialogVisible = false">打印</el-button>
            </span>
          </el-dialog>
        </el-card>

        <el-card style=" margin-top:20px" v-if="formInline.active!==4">
          <el-button type="success" v-if="formInline.active===0" @click="editPro('formInline')">确认修改</el-button>
          <el-button type="danger" style="width:100px" @click="cancle">取消</el-button>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>
<script>
  import store from "@/vuex/store";
  import {
    getBnBasicInfoApi,
    commitProApi,
    returnProApi,
    editProApi,
  } from "@/api/applyApi";
  import {
    getFamilyMenberByBiidApi
  } from "@/api/familyMenberApi";
  import {
    getDocumentListApi,
    downDocumentApi
  } from "@/api/documentApi";
  import {
    queryOpinionByApplyCodeApi
  } from "@/api/opinionApi";
  import {
    getChildrenAddress
  } from "@/api/addressDictionary";
  import config from "@/config/config";
  import axios from "axios";
  export default {
    name: "putBussi",
    data() {
      return {
        activeNameF: "1",
        url: "",
        idCardState: true,
        activeNames: "1",
        centerDialogVisible: false,
        currentCode: store.getters.currentCode,
        headerRow: {
          "font-size": "20px",
          margin: "2%",
          height: "80px",
        },
        styleRow: {
          "font-size": "15px",
          height: "50px",
        },
        opinionInfo: [{
          uName: "",
          opinion: "",
          state: "",
          order: "",
          submitTime: "",
        }, ],
        viewState: "second",
        activeName: "second",
        uid: store.getters.uid,
        initState: false,
        fileList1: [],
        fileList2: [],
        fileList3: [],
        fileList4: [],
        formFile: new FormData(),
        formInline: {
          uid: store.getters.uid,
          typeName: "",
          type: "",
          applyCode: null,
          name: "Xiaoyp",
          sex: "男",
          familyCount: "",
          tel: null,
          idCard: "",
          address: "",
          active: 0,
          nowHomesteadArea: null, //现宅基地面积
          nowBuildArea: null, //现建筑面积
          nowBookId: "", //现权属证书号
          nowSaveArea: "", //现保留面积
          nowReturnArea: "", //退给村集体面积
          nowOtherArea: "", //其他面积
          applyHomesteadArea: "", //拟申请宅基地面积
          applyFoundationArea: "", //拟申请房基占地面积
          applyAddress: "", //拟申请宅基地及建房地址
          east: "", //东至
          south: "", //南至
          west: "", //西至
          north: "", //北至
          buildingType: "", //建房类型
          landType: "", //地类
          applyHousingArea: "", //住房建筑面积
          applyLayer: "", //层数
          applyHight: "", //高度
          content: "",
          //文件列表
          formFileList: [],
          townCode: "",
          villageCode: "",
          townList: [],
          villageList: [],
          opinion: "",
        },
        //申请信息
        apply: {
          applyHomesteadArea: "", //拟申请宅基地面积
          applyFoundationArea: "", //拟申请房基占地面积
          applyAddress: "", //拟申请宅基地及建房地址
          east: "", //东至
          south: "", //南至
          west: "", //西至
          north: "", //北至
          buildingType: "", //建房类型
          landType: "", //地类
          applyHousingArea: "", //住房建筑面积
          applyLayer: "", //层数
          applyHight: "", //高度
          neighborMind: "是", //邻居意见
        },
        putFailyState: false,
        familyMember: [],
        memberDetail: {
          listId: "",
          name: "",
          birthDate: "",
          sex: "",
          address: "",
          relation: "",
          idCard: "",
          applyCode: "",
          content: "",
        },
      };
    },
    methods: {
      showFileType() {
        for (let i = 0; i < this.formInline.formFileList.length; i++) {
          return showFileType;
        }
      },
      //改变乡镇
      townChange() {
        if (this.formInline.townCode) {
          getChildrenAddress(this.formInline.townCode).then((villageList) => {
            this.formInline.villageList = villageList.data.data;
            this.formInline.villageCode = this.formInline.villageList[0].code;
          });
        }
      },
      editPro(formName) {
        if (this.idCardState) {
          this.formInline.uid = this.uid;
          const loading = this.$loading({
            //打开加载等待效果
            lock: true,
            text: "正在修改",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          if (this.checkIdCardByJs(this.formInline.idCard) == false) {
            loading.close();
            return;
          }

          if (this.checkPhone(this.formInline.tel) == false) {
            this.$message({
              showClose: true,
              message: "联系方式填写错误",
              type: "error",
            });
            loading.close();
            return;
          }

          if (
            !this.checkFamilyNum(
              this.formInline.formMenberList,
              this.formInline.familyCount
            )
          ) {
            this.$message({
              showClose: true,
              message: "请核对家庭成员数量",
              type: "error",
            });
            loading.close();
            return;
          }

          this.$confirm("是否保存?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
            .then(() => {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  editProApi(this.formInline)
                    .then((response) => {
                      let configs = {
                        headers: {
                          "Content-Type": "multipart/form-data",
                        },
                      };
                      this.formFile.append("token", store.getters.token);
                      this.formFile.append(
                        "applyCode",
                        response.data.data.applyCode
                      );
                      axios
                        .post(config.uploadDocListUrl, this.formFile, configs)
                        .then((res) => {
                          this.$message.success("修改成功");
                          this.$router.go(-1);
                        })
                        .catch((err) => {
                          this.$message.error(err.respondMessage);
                        });
                      loading.close(); //瞬间没得
                    })
                    .catch((error) => {
                      this.$message({
                        showClose: true,
                        message: error.data.respondMessage,
                        type: "error",
                      });
                      loading.close();
                    });
                } else {
                  this.$message({
                    showClose: true,
                    message: "修改失败，请检查户主信息的红色字段是否填写正确",
                    type: "error",
                  });
                  loading.close();
                }
              });
            })
            .catch((e) => {
              this.$message({
                type: "info",
                message: "取消修改",
              });
              loading.close();
            });
        } else {
          this.$message.error("请检查身份证");
        }
      },
      //格式化意见状态
      opinionStateFormetter(row) {
        return row.state == "1" ?
          "收件" :
          row.state == "2" ?
          "收件" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工管理" :
          row.state == "6" ?
          "归档" :
          "未知";
      },
      sexFormatter(row) {
        return row.sex == "1" ? "男" : row.sex == "2" ? "女" : "未知";
      },

      formatDate(row) {
        let date = new Date(row.birthDate);
        let Y = date.getFullYear() + "-";
        let M =
          date.getMonth() + 1 < 10 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1;
        return Y + M;
      },
      //获取意见列表
      getOpinion(applyCode) {
        queryOpinionByApplyCodeApi(applyCode)
          .then((res) => {
            this.opinionInfo = res.data.data;
          })
          .catch((err) => {
            this.$message.error(err.data.respondMessage);
          });
      },

      //删除要件
      handleDeleteFile(index, row) {
        this.formInline.formFileList.splice(index, 1);
        this.formFile.delete(row.fileName);
      },
      //下载要件
      downDocument(index, row) {
        downDocumentApi(row.id);
        this.$message({
          showClose: true,
          message: "下载成功",
          type: "success",
        });
      },
      // printFile(index, row) {
      //   window.print(row);
      // },
      //删除家庭成员
      handleDelete(index, row) {
        //回显
        this.familyMember.splice(index, 1);
      },

      //表格的序号
      indexMethod(index) {
        //为了给每一行数据曾家一个标识符，用于判断是否是修改还是添加
        this.familyMember[index].listId = index + 1;
        return index + 1;
      },
      //获取家庭成员
      getFamilyMenber(applyCode) {
        if (applyCode === -1) {
          return;
        } else {
          getFamilyMenberByBiidApi(applyCode)
            .then((response) => {
              this.familyMember = response.data.data.items;

              this.formInline.formMenberList = this.familyMember;
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: error,
                type: "error",
              });
              this.tableLoding = false;
            });
        }
      },
      // 获取要件列表
      getDocumentList(applyCode) {
        //this.formInline.formFileList = this.fileList;
        if (applyCode === -1) {
          this.formInline.formFileList = this.fileList1;
          return;
        } else {
          getDocumentListApi(applyCode)
            .then((response) => {
              response.data.data.items.forEach((file) => {
                if (file.state == "2") {
                  this.fileList1.push(file);
                  this.formInline.formFileList = this.fileList1;
                } else if (file.state == "3") {
                  this.fileList2.push(file);
                  this.formInline.formFileList = this.fileList2;
                } else if (file.state == "4") {
                  this.fileList3.push(file);
                  this.formInline.formFileList = this.fileList3;
                } else if (file.state == "5") {
                  this.fileList4.push(file);
                  this.formInline.formFileList = this.fileList4;
                }
              });
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: error,
                type: "error",
              });
              this.tableLoding = false;
            });
        }
      },

      cancle() {
        this.$router.go(-1);
      },

      //预览handleEditFile
      handleEditFile(index, row) {
        if (row.url) {
          var previewUrl = row.url.split(":");
          var url = config.baseUrl + previewUrl[1];
          if (/\.(jpe?g|png|gif)$/i.test(row.url)) {
            this.url = url;
            this.srcList = url;
            this.centerDialogVisible = true;
          } else {
            window.open(url, "_blank");
          }
          // window.open(config.baseUrl + previewUrl[1], "_blank");
        } else {
          if (/\.(jpe?g|png|gif)$/i.test(row.file.name)) {
            let url = URL.createObjectURL(row.file);
            // window.open(url, "_blank");
            this.url = url;
            this.srcList = url;
            this.centerDialogVisible = true;
          } else if (/\.(pdf)$/i.test(row.file.name)) {
            var win = window.open();
            var reader = new FileReader(); //文件读取器
            reader.readAsDataURL(row.file);
            reader.onload = function () {
              var result = reader.result;

              win.document.write(
                '<body style="margin:0px;"><object data="' +
                result +
                '" type="application/pdf" width="100%" height="100%"><iframe src="' +
                result +
                '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
              );
            };
          } else {
            this.$message.error("该类型文件暂不支持预览，请提交后下载下载");
          }
        }
      },

      getCurrentTime() {
        var myDate = new Date();
        var year = myDate.getFullYear();
        var mounth = myDate.getMonth() + 1;
        var day = myDate.getDate();
        var getUplodTime = year + "-" + mounth + "-" + day;
        return getUplodTime;
      },

      //获取申请信息
      getApplyInfo(applyCode) {
        getBnBasicInfoApi(applyCode).then((res) => {
          this.apply = res.data.data.apply;
        });
      },

      //关联成员
      checkFamilyNum(familyList, count) {
        if (familyList) {
          if ((count = familyList + 1)) {
            return true;
          } else {
            return false;
          }
        } else {
          return true;
        }
      },
      //手机正则校验
      checkPhone(mobile, e) {
        var flag = false;
        var tel = /^0\d{2,3}-?\d{7,8}$/;
        var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        var tempPhone = "";
        if (mobile.length == 11) {
          //手机号码
          tempPhone = mobile.slice(0, 2);
          if (
            (tempPhone == "13" ||
              tempPhone == "15" ||
              tempPhone == "17" ||
              tempPhone == "18" ||
              tempPhone == "19") &&
            phone.test(mobile)
          ) {
            flag = true;
            return flag;
          }
        }
        if (
          mobile.length == 11 ||
          (mobile.length == 12 && mobile.indexOf("-") != -1)
        ) {
          if (tel.test(mobile)) {
            flag = true;
            return flag;
          }
        }
        return flag;
      },
      checkIdCardByJs(idCard, e) {
        var num = idCard;
        num = num.toUpperCase();

        var len, re;
        len = num.length;
        if (len == 0) return true;

        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
        if (!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num)) {
          this.$message({
            showClose: true,
            message: "请输入15位全数字，或者最后一位为字母的18位身份证号",
            type: "message",
          });
          //this.$refs.idCardText.focus();
          return false;
        }

        //验证前两位地区是否有效
        var aCity = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外",
        };
        if (aCity[parseInt(num.substr(0, 2))] == null) {
          this.$message({
            showClose: true,
            message: "身份证输入有误",
            type: "message",
          });
          //this.$refs.idCardText.focus();
          return false;
        }

        //当身份证为15位时的验证出生日期。
        if (len == 15) {
          re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
          var arrSplit = num.match(re);
          //检查生日日期是否正确
          var dtmBirth = new Date(
            "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          var bGoodDay;
          bGoodDay =
            dtmBirth.getYear() == Number(arrSplit[2]) &&
            dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
            dtmBirth.getDate() == Number(arrSplit[4]);
          if (!bGoodDay) {
            this.$message({
              showClose: true,
              message: "身份证输入有误，生日日期可能有误",
              type: "message",
            });
            //this.$refs.idCardText.focus();
            return false;
          }
        }
        //当身份证号为18位时，校验出生日期和校验位。
        if (len == 18) {
          re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
          var arrSplit = num.match(re);
          //检查生日日期是否正确
          var dtmBirth = new Date(
            arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          var bGoodDay;
          bGoodDay =
            dtmBirth.getFullYear() == Number(arrSplit[2]) &&
            dtmBirth.getMonth() + 1 == Number(arrSplit[3]) &&
            dtmBirth.getDate() == Number(arrSplit[4]);
          if (!bGoodDay) {
            this.$message({
              showClose: true,
              message: "身份证输入有误，生日日期可能有误",
              type: "message",
            });
            // idCard.focus();
            //this.$refs.idCardText.focus();
            return false;
          } else {
            //检验18位身份证的校验码是否正确。
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            var valnum;
            var arrInt = new Array(
              7,
              9,
              10,
              5,
              8,
              4,
              2,
              1,
              6,
              3,
              7,
              9,
              10,
              5,
              8,
              4,
              2
            );
            var arrCh = new Array(
              "1",
              "0",
              "X",
              "9",
              "8",
              "7",
              "6",
              "5",
              "4",
              "3",
              "2"
            );
            var nTemp = 0,
              i;
            for (i = 0; i < 17; i++) {
              nTemp += num.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum != num.substr(17, 1)) {
              this.$message({
                showClose: true,
                message: "身份证输入有误",
                type: "message",
              });
              //idCard.focus();
              //this.$refs.idCardText.focus();
              return false;
            }
          }
        }
        this.idCardState = true;
      },
    },
    mounted() {
      if (this.formInline.applyCode) {
        //setTimeout(function() {
        this.getFamilyMenber(this.formInline.applyCode);
        this.getDocumentList(this.formInline.applyCode);
        this.getOpinion(this.formInline.applyCode);
        this.getApplyInfo(this.formInline.applyCode);
        //}, 500);
      } else {
        //防止没有数据的时候，家庭成员显示列表
        this.getFamilyMenber(-1);
        this.getDocumentList(-1);
      }
    },
    created: function () {
      //获取数据
      this.formInline = this.$route.query;
    },
  };
</script>
<style>
  .uploadStyle {
    margin-top: 1%;
    text-align: center;
    height: 80px;
    font-size: 18px;
  }
</style>